<template>
    <div style="margin-top:20px" class="container">
        <module-title title="人才集聚"></module-title>
        <div class="flex" style="justify-content:space-around;padding-top:20px">
            <div class="label">人才集聚占比标准：<span class="value">{{data.value1}}%</span></div>
            <div class="label">活跃群演人数：<span class="value">{{data.qzyyrs}}</span>人</div>
        </div>
        <div class="flex vDivider">
            <div style="flex:1;height:168px" ref="assemble-left-module2-chart1" class="chart"></div>
<!--            <div style="flex:1;height:168px" ref="assemble-left-module2-chart2"></div>-->
            <div class="flexbetween" style="flex:1;height:168px; align-items: center">
              <div class="progressHbox">
                <div class="progressHcontent" v-for="(item,index) in data.qzyydata" :style="{'height':item.percent+'%'}"></div>
              </div>
              <div class="listledbox" style="height:150px;">
                <div class="listledcontent" v-for="(item,index) in data.qzyydata" :key="index">
                  <p>{{item.name}}</p><p><span>{{item.value}}</span><b>人</b></p><p><span>{{item.percent}}%</span></p>
                </div>
              </div>

            </div>
        </div>
        <div class="dashDivider" style="margin-top:10px"></div>
        <assemble-left-module-3 :data="data.leftModule3"></assemble-left-module-3>
    </div>
</template>
<script>
import ModuleTitle from '../ModuleTitle.vue'
import * as echarts from 'echarts';
import 'echarts-liquidfill'
import AssembleLeftModule3 from './AssembleLeftModule3.vue';
export default {
    components: { ModuleTitle, AssembleLeftModule3 },
    props: {
        data: Object
    },
    data() {
        return {
            chart1: null,
            chart2: null
        }
    },
    watch: {
        data: {
            handler(oldV, newV) {
                setTimeout(() => {
                    this.showChart(this.chart1, 'assemble-left-module2-chart1', this.getOption1())
                   // this.showChart(this.chart2, 'assemble-left-module2-chart2', this.getOption2())
                }, 100);
            },
            immediate: true
        }
    },
    methods: {
        showChart(intance, id, option) {
            if (!intance) {
                intance = echarts.init(this.$refs[id]);
            } else {
                intance.clear();
            }
            intance.setOption(option);
        },
        getOption1() {
            return {
                series: [
                    {
                        type: 'liquidFill', //水位图
                        radius: '70%', //显示比例
                        center: ['50%', '50%'], //中心点
                        amplitude: 20, //水波振幅
                        data: [.5,.5, .5], // data个数代表波浪数
                        color: [
                            {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgba(6, 95, 184, 0)',
                                    },
                                    {
                                        offset: 1,
                                        color: '#65D2FF',
                                    },
                                ],
                                globalCoord: false,
                            },
                        ], //波浪颜色
                        backgroundStyle: {
                            borderWidth: 1, //外边框
                            color: 'transparent'
                            // color: '', //边框内部填充部分颜色
                        },
                        label: {
                            //标签设置
                            position: ['50%', '50%'],
                            formatter: `${this.data.value3}%\n{label|影视人才}`, //显示文本,
                            textStyle: {
                                fontSize: 24, //文本字号,
                                color: '#fff',
                            },
                            rich: {
                                label: {
                                    fontSize: 16,
                                    color: '#FFF',
                                    padding: [4, 0, 4,]
                                }
                            }
                        },
                        outline: {
                            show: true,
                            borderDistance: 0,
                            itemStyle: {
                                borderWidth: 0,
                                color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 0,
                                colorStops: [{
                                    offset: 0, color: '#0b2355' // 0% 处的颜色
                                }, {
                                    offset: 1, color: '#195b9d' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                                }
                            }
                            }
                    },
                ],
            }
        },
        getOption2() {
            let commonInfo = {
                pointer: {show: false},
                axisLabel: {show: false},
                pointer: {show :false},
                detail: {show :false},
                splitLine: {show: false},
                axisTick: {show: false},
                startAngle: 90,
                endAngle: -270,
                type: 'gauge',
                center: ['50%', "50%"],
            }
            return {

                title: {
                    //标签设置
                    text: `${this.data.value4}%\n{label|影视配套\n人员}`,
                    textAlign: 'center',
                    left: '50%',
                    top: '26%',
                    textStyle: {
                        fontSize: 24, //文本字号,
                        color: '#fff',
                        rich: {
                            label: {
                                fontSize: 16,
                                color: '#FFF',
                                padding: [4, 0, 4,]
                            }
                        }
                    },

                },
                series: [
                    {
                        name: '内景数',
                        radius: '70%',
                        progress: {
                            show: true,
                            itemStyle: {
                                width: 10,
                                color: {
                                    type: 'linear',
                                    x: 0, y: 0,
                                    x2: 0, y: 1,
                                    colorStops: [{
                                        offset: 1, color: '#65D2FF'
                                    }, {
                                        offset: 0, color: '#0884FF'
                                    }]
                                }
                            }
                        },

                        axisLine: {
                            show: false,
                        },
                        data: [{value: this.data.value4, }],
                        ...commonInfo
                    },
                    {

                        radius: '74%',
                        axisLine: {
                            lineStyle: {
                                color: [[1, '#0884FF']],
                                opacity: 0.24,
                                width: 18
                            }
                        },
                        ...commonInfo
                    },
                    {
                        type: 'gauge',
                        startAngle: 0,
                        endAngle: 360,
                        // top: '-15%',
                        radius: '110%',
                        axisLine: {show: false},
                        splitLine: {show: false},
                        axisLabel: {show: false},
                        axisTick: {
                            splitNumber: 10,
                            length: 4,
                            lineStyle: {
                                color:'rgba(187,237,255,0.72)'
                            }
                        },
                }
                ]
            }
        }
    }

}
</script>
<style lang="less" scoped>
.container {
    background-image: linear-gradient(180deg, rgba(8,132,255,0.00) 0%, rgba(8,132,255,0.12) 100%);
}
.flex {
    display: flex;
    align-items: center;
}
.vDivider {
    position: relative;
    &::before {
      position: absolute;
      content: " ";
      height: calc(100% + 20px);
      width: 1px;
      left: 50%;
      top: -30px;
      background-image: linear-gradient(to bottom, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.4) 50%, transparent 50%);
      background-size: 1px 4px;
      background-repeat: repeat-y;
    }
  }
  .chart {
    position: relative;
    width: 50%;
    &::before {
        content: " ";
        width: 100%;
        height: calc(100% - 20px);
        position: absolute;
        background-image: url('../../assets/circle_bg.svg');
        background-size: auto 100%;
        left: 0;
        top: 10px;
        background-position: center center;
        background-repeat: no-repeat;
    }
}
  .flexbetween{
    display: flex;
    justify-content: space-between;
  }
.progressHbox{
  width:24px;
  height:152px;
  background: rgba(8,132,255,0.24);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left:15px;
  .progressHcontent{
    width:16px;
    margin:2px auto;
    &:nth-child(1){
      background: #FF453A;
    }
    &:nth-child(2){
      background: #FFA00A;
    }
    &:nth-child(3){
      background: #30D158;
    }
    &:nth-child(4){
      background: #65D2FF;
    }
    &:nth-child(5){
      background: #0884FF;
    }
  }
}
.listledbox{
  flex:1;
  margin-left: 30px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  .listledcontent{
    display: flex;
    position: relative;
    p{
      margin:0;
      padding: 0;
      color:#fff;
      font-size:16px;
      padding-right:5px;
      &:nth-child(1){
        padding-left: 20px;
      }
      span{
        font-family: DINPro-Medium;
        font-size: 16px;
        color: #64E6E2;
        letter-spacing: 0.96px;
        font-weight: 600;
      }
      b{
        color:rgba(255,255,255,.7);
        font-weight: normal;
      }
    }
    &:nth-child(1):before{
      content:'';
      width:8px;
      height:8px;
      position: absolute;
      left:0;
      top:8px;
      background: #FF453A;
    }
    &:nth-child(2):before{
      content:'';
      width:8px;
      height:8px;
      position: absolute;
      left:0;
      top:8px;
      background: #FFA00A;
    }
    &:nth-child(3):before{
      content:'';
      width:8px;
      height:8px;
      position: absolute;
      left:0;
      top:8px;
      background: #30D158;
    }
    &:nth-child(4):before{
      content:'';
      width:8px;
      height:8px;
      position: absolute;
      left:0;
      top:8px;
      background: #65D2FF;
    }
    &:nth-child(5):before{
      content:'';
      width:8px;
      height:8px;
      position: absolute;
      left:0;
      top:8px;
      background: #0884FF;
    }
  }

}
</style>
